<template>
  <div class="page">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="接入方式">
        <el-select v-model="form.type">
          <el-option
            v-for="(item, index) in sourceTypes"
            :key="index"
            :label="item.name"
            :value="item.type"></el-option>
        </el-select>
      </el-form-item>
      <form-item
        v-for="(item, index) in getProps(sourceTypes)"
        :key="index"
        :info="item"></form-item>
    </el-form>
  </div>
</template>

<script>
import FormItem from './cFormItem.vue'
const data = require('./data.json')
export default {
  components: {
    FormItem
  },
  data() {
    return {
      sourceTypes: data,
      form: {}
    };
  },
  methods: {
    getProps (sourceTypes) {
      const obj = sourceTypes.find(item => item.type === this.form.type)
      return obj && obj.props
    }
  },
  created () {
    console.log(data)
  }
}
</script>

<style lang="scss">
.page {
  width: 100%;
  height: 100%;
  padding: 10px;
}
</style>
